<template>
  <workflowEditPanel
    v-loading="loading"
    ref="workflowEditPanelRef"
    :nodeData="flowDesignData"
    @closed="emit('update:visible', false)"
    @update="update"
    :viewOnly="true"
  />
</template>

<script setup>
import { reactive, ref, unref, computed, watch, onMounted } from "vue";
import { useAutoPostHeight } from "../../hooks/useAutoPostHeight";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import workflowEditPanel from "@/components/WorkflowDesign/Designs/panel.vue";

const props = defineProps({
  taskId: {
    default: "",
  },
  entityFullName: {
    default: "",
  },
  entityKeyValue: {
    default: "",
  },
});

const loading = ref(false);
const flowDesignData = ref("");
const versionData = ref({});
const workflowEditPanelRef = ref(null);
const workflowDesignStore = useWorkflowDesignStore();
const hasTaskId = computed(() => {
  return props.taskId && props.taskId.length > 0;
  // return true;
});

watch(
  () => props,
  () => {
    taskId.value = props.taskId;
    reload();
  },
  {
    deep: true,
  }
);

const load = async (taskId) => {
  loading.value = true;
  const res = await workflowDesignStore.getWorkflowVersionByTaskId({
    workTaskId: taskId,
  });
  flowDesignData.value =
    !res.drawingInfo || res.drawingInfo.length == 0
      ? {
          name: "",
          nodeList: [],
          lineList: [],
        }
      : JSON.parse(res.drawingInfo);
  versionData.value = res;

  workflowEditPanelRef.value.loadNodeData();
  loading.value = false;
};


const reload = async () => {
  if (!hasTaskId) {
    const res = await workTaskStore.getWorkTaskByEntityInfo({
      entityFullName: props.entityFullName,
      entityKeyValue: props.entityKeyValue,
    });
    load(res.id);
  } else {
    load(props.taskId);
  }
};

useAutoPostHeight("Workflow-FlowDesign");

onMounted(async () => {
  reload();
});

</script>

<style lang="less" scoped>
:deep(.no-header-dialog) {
  padding: 0px !important;
  .el-dialog__header {
    padding: 0px;
    height: 0px;
    text-align: right;
  }
  .el-dialog__body {
    width: 100%;
    height: calc(100vh);
    padding: 0px !important;
  }
}
:deep(.el-drawer__body) {
  padding: 0px;
}
</style>
